<template>
  <el-dialog
    :visible="opetatorDialog"
    :show-close="true"
    :before-close="handleClose"
    :close="handleClose"
    :class="{'mobile-dialog':showMobilePage}"
    class="small-common-dialog-size operator-dialog"
  >
    <Title title="追加说明" style="margin-bottom:12px" font-size="16px"/>
    <div class="descript">
      <remarkInput
        ref="remarkInput"
        :remark-list="description"
        is-additional
        @addItem="addItem()"
        @toDelete="toDelete($event)"
      />
    </div>
    <fixed-pagination class="fixed-radius" style="width: 100%; margin: 0">
      <div class="center">
        <el-button :disabled="loading" type="primary" size="small" class="ok submit-btn" @click="additional">确认追加<i v-if="loading" class="el-icon-loading"/></el-button>
        <el-button class="back-btn cancel-btn-style" type="info" size="small" @click="handleClose" >取消</el-button>
      </div>
    </fixed-pagination>
  </el-dialog>
</template>
<script>
import { additional } from '@/api/flyNotice';
import Title from '@/components/Title';
import remarkInput from '../components/remarkInput';
import { mapState } from 'vuex';
import { generateUUID } from '@/utils/tools';

export default {
  components: { Title, remarkInput },
  props: {
    queryOrderId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      ids: '',
      description: [],
      opetatorDialog: false,
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(ids) {
      this.ids = ids;
      this.opetatorDialog = true;
      this.addItem();
    },
    handleClose() {
      this.ids = '';
      this.description = [];
      this.$refs.remarkInput.clearError();
      this.opetatorDialog = false;
    },
    addItem() {
      if (this.description && this.description.length >= 50) {
        this.$message.warning('最多可添加50个问题');
        return;
      }
      this.description.push({
        type: 0,
        content: '',
        autofocus: true,
        required: 1,
        _uuid: generateUUID(),
        selectList: [],
        placeholder: '用户可输入回复该问题'
      });
    },
    toDelete(index) {
      this.description.splice(index, 1);
    },
    additional() {
      if (!this.description.length) {
        this.$message.warning('请先添加问题');
        return;
      }
      if (!this.$refs['remarkInput'].validate()) {
        return;
      }
      this.loading = true;
      const data = {
        ids: this.ids,
        queryOrderId: this.queryOrderId,
        description: this.description
      };
      additional(data).then(res => {
        this.loading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.handleClose();
        this.$emit('updateInfo');
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.operator-dialog{
  &::v-deep {
    .el-dialog{
      width: 1000px !important;
      height: 320px !important;
    }
    .el-dialog__body{
      overflow: scroll;
      padding: 16px 24px 100px !important;
    }
  }
  .fixed-radius {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .center{
    display: flex;
    justify-content: center;
  }
}
.mobile-dialog {
  &::v-deep {
    .el-dialog{
      width: 100% !important;
    }
  }
}
</style>
